import React, { useEffect, useState } from "react";

function sleep(time) {
  return new Promise((reslove) => {
    setTimeout(() => {
      reslove();
    }, time);
  });
}

async function getPerson() {
  await sleep(200);
  return ["a", "b", "c"];
}

function usePerson() {
  const [list, setList] = useState([]);

  function request() {
    const getList = async () => {
      const arrList = await getPerson()
      setList(arrList);
    }
    getList()
  }

  useEffect(request, []);
  return list;
}

export default function CustomizeHooks() {
  const list = usePerson();
  if (list === null) {
    return <div>loading</div>;
  }
  return (
    <div>
      {list.map((el) => (
        <div key={el}>{el}</div>
      ))}
    </div>
  );
}
